<template>
  <div class="same-color">
    <el-row>
      <el-col>
        <div class="same-box" v-for="item in samebox">
          <el-row>
            <el-col :span="3">
              <h3 class="same">{{item.h3name}}</h3>
            </el-col>
            <el-col :span="5">
              <ul>
                <li class="tongkuan">{{item.kuan}}
                  <i class="el-icon-caret-bottom"></i>
                </li>
              </ul>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <template>
                <el-carousel arrow="always" height="360px">
                  <el-carousel-item>
                    <el-row>
                      <el-col :span="8">
                        <a href="javascript:" class="same-img">
                          <img :src="item.src1" />
                        </a>
                      </el-col>
                      <el-col :span="16">
                        <ul class="same-ul">
                          <li class="same-all" v-for="(obj,index) in item.same" :key="index">
                            <a href="javascript:">
                              <img :src="obj.url" />
                            </a>
                          </li>
                        </ul>
                      </el-col>
                    </el-row>
                  </el-carousel-item>
                </el-carousel>
              </template>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col>
        <div class="ranking">
          <el-row>
            <el-col :span="2">
              <h3 class="h3-ranking">排行榜</h3>
            </el-col>
            <el-col :span="20">
              <ul class="ul-ranking">
                <li v-for="(item,index) in ranking" :key="index" @mouseover="overcolor(index)" @mouseout="outcolor(index)">
                  <a href="javascript:" :style="{'background-color':item.backgroundcolor,'color':item.color}">{{item.title}}</a>
                  <i class="el-icon-caret-bottom" v-show="item.flag"></i>
                </li>
              </ul>
            </el-col>
            <el-col :span="2">
              <a href="javascript:" class="ranking-all">查看更多<i class="el-icon-arrow-right"></i></a>
            </el-col>
          </el-row>
          <template>
            <el-carousel arrow="always" indicator-position="none" height="300px">
              <el-carousel-item v-for="(item,index) in titlelist" :key="index">
                <el-row>
                  <el-col :span="8">
                    <a href="javascript:" class="rangking-a1">
                      <img :src="item.url" />
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="javascript" class="rangking-a2">
                      <el-row>
                        <el-col>
                          <i class="one">{{item.one}}</i>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="11">
                          <div class="one-img">
                            <img :src="item.oneurl" />
                          </div>
                        </el-col>
                        <el-col :span="11" :push="1">
                          <div class="one-img1">
                            <img :src="item.paizi" />
                            <el-row>
                              <el-col>
                                <p class="p1">{{item.p1}}</p>
                              </el-col>
                              <el-col>
                                <p class="p2"><span>¥{{item.price}}</span>/<em>销量{{item.sales}}</em></p>
                              </el-col>
                              <el-col>
                                <a href="javascript:" class="a-a">立即查看</a>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <ul class="rangking-a3">
                      <li v-for="(item1,index1) in item.all" :key="index1">
                        <el-row>
                          <el-col>
                            <i class="two">{{item1.number}}</i>
                          </el-col>
                          <el-col>
                            <div class="two-img">
                              <img :src="item1.numberurl" />
                            </div>
                          </el-col>
                          <el-col>
                            <!-- <div class="two-div">
                              <p class="name">{{item1.introduce}}</p>
                              <p class="ps1"><span class="sp1">¥{{item1.inprice}}</span>/<span class="sp2">销量{{item1.inxiaoliang}}</span></p>
                            </div> -->
                          </el-col>
                        </el-row>
                      </li>
                    </ul>
                  </el-col>

                </el-row>

              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        samebox: [{
            h3name: "时尚腕表",
            kuan: "明星同款",
            src1: "//image8.wbiao.co/mall/fe389e9b18674fe1844f6fdce9924d45.jpg",
            same: [{
                url: "//image8.wbiao.co/mall/43f96954fc384db7b7b282bb03494d5d.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/04b2f26ba9b049caa03ab2456f5f1692.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/e6dd3864b5b847998de91b45374770bd.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/96759ee9b25242f48e124f1ab858afdc.jpg"
              }
            ]
          },
          {
            h3name: "运动、智能表",
            kuan: "领券更优惠",
            src1: "//image8.wbiao.co/mall/36e820696f80419ba128c0ad557828af.jpg",
            same: [{
                url: "//image8.wbiao.co/mall/b32d2cc0bcca469581d627b5d2511ea1.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/869ab0157a91487aa11671753fe2b13a.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/b5a0d449b1c6456f9201df1b6f67d1dd.jpg"
              },
              {
                url: "//image8.wbiao.co/mall/d4f8ca4d49f6430592ace202eff28061.jpg"
              }
            ]
          }
        ],
        titlelist: [{
            url: "//image8.wbiao.co/mall/e6d6015df2f14ab0b7ca7f7bcd36959a.jpg",
            one: "No.1",
            oneurl: "//image8.wbiao.co/shop/1fee5b19be004382a23bac0f53da1f2e.jpg",
            paizi: "//image8.wbiao.co/mall/bb14ee6860354ced8fc5ffb6045b3eac.png",
            p1: "玛莎拉蒂 TRIMARONA 帆船系列",
            price: "4550",
            sales: "49",

            all: [{
                number: "No.2",
                numberurl: "//image8.wbiao.co/shop/86dc33501ad841018f994e63aa309688.jpg",
                introduce: "赫柏林 Perles 珍珠系列",
                inprice: "3800",
                inxiaoliang: "2168"
              },
              {
                number: "No.3",
                numberurl: "//image8.wbiao.co/shop/86dc33501ad841018f994e63aa309688.jpg",
                introduce: "赫柏林 Perles 珍珠系列",
                inprice: "3800",
                inxiaoliang: "2168"
              },
              {
                number: "No.4",
                numberurl: "//image8.wbiao.co/shop/86dc33501ad841018f994e63aa309688.jpg",
                introduce: "赫柏林 Perles 珍珠系列",
                inprice: "3800",
                inxiaoliang: "2168"
              },
              {
                number: "No.5",
                numberurl: "//image8.wbiao.co/shop/86dc33501ad841018f994e63aa309688.jpg",
                introduce: "赫柏林 Perles 珍珠系列",
                inprice: "3800",
                inxiaoliang: "2168"
              }
            ]
          },
          {
            url: "//image8.wbiao.co/mall/9185a5a6025b4b3eae50f9ddd813a3ea.jpg",
            one: "No.1",
            oneurl: "//image8.wbiao.co/shop/1c24395bb10b445883fb8d7f3f64dd30.jpg",
            paizi: "//image8.wbiao.co/mall/013bc3838cbd4a83a5ece086f7742a78.jpg",
            p1: "东方星  大师系列",
            price: "4743",
            sales: "47",
            all: [{
                number: "No.2",
                numberurl: "//image8.wbiao.co/shop/b68b8bf65811426ca53588ce7bdc18a6.jpg",
                introduce: "浪琴  瑰丽系列",
                inprice: "8200",
                inxiaoliang: "790"
              },
              {
                number: "No.3",
                numberurl: "//image8.wbiao.co/shop/201708_24_SRPB41J1_32518.jpg",
                introduce: "精工 Presage领航系列",
                inprice: "2542",
                inxiaoliang: "151"
              },
              {
                number: "No.4",
                numberurl: "//image8.wbiao.co/shop/69f782a5182c4808b2095a475f8b199c.jpg",
                introduce: "拓天马 Saxon One 都市系列",
                inprice: "22100",
                inxiaoliang: "14"
              },
              {
                number: "No.5",
                numberurl: "//image8.wbiao.co/shop/3dadc3cefd244fe689fbafd54afc2b37.jpg",
                introduce: "万国 飞行员系列",
                inprice: "36960",
                inxiaoliang: "157"
              }
            ]
          },
          {
            url: "//image8.wbiao.co/mall/bfe780035c594ef282b60f8ff17070aa.jpg",
            one: "No.1",
            oneurl: "//image8.wbiao.co/shop/80b6a4d2175c4028999e3e2eab242d3f.jpg",
            paizi: "//image8.wbiao.co/mall/f14b187b142646348d884cfc33db31a8.png",
            p1: "爱宝时  Ladies 女士系列",
            price: "6780",
            sales: "476",
            all: [{
                number: "No.2",
                numberurl: "//image8.wbiao.co/shop/f29bae2deb9143cab946f7327d677e59.jpg",
                introduce: "赫柏林  Perles 珍珠系列",
                inprice: "3800",
                inxiaoliang: "2168"
              },
              {
                number: "No.3",
                numberurl: "//image8.wbiao.co/shop/201305_07_123_20_27_60_55_003_88395.jpg",
                introduce: "欧米茄  星座系列",
                inprice: "31200",
                inxiaoliang: "89"
              },
              {
                number: "No.4",
                numberurl: "//image8.wbiao.co/shop/b687a05af20b4ff7b6dfe0060340145c.jpg",
                introduce: "迪沃斯  Heritage传统系列",
                inprice: "1638",
                inxiaoliang: "419"
              },
              {
                number: "No.5",
                numberurl: "//image8.wbiao.co/shop/a221efbc71e84fe6b7586487c30519b0.jpg",
                introduce: "卡地亚  蓝气球系列",
                inprice: "32200",
                inxiaoliang: "230"
              }
            ]
          }
        ],
        ranking: [{
            title: "男表",
            flag: false,
            color: "",
            backgroundcolor: ""
          },
          {
            title: "女表",
            flag: false,
            color: "",
            backgroundcolor: ""
          },
          {
            title: "潮表",
            flag: false,
            color: "",
            backgroundcolor: ""
          }
        ]

      }
    },
    components: {

    },
    methods: {
      overcolor(index1) {
        this.ranking.forEach((obj, index) => {
          if (index1 == index) {
            this.ranking[index1].flag = true
            this.ranking[index1].backgroundcolor = '#333'
            this.ranking[index1].color = '#f2d291'

          } else {
            this.ranking[index].flag = false
            this.titlelist[index1].on = true
          }
        })


      },
      outcolor(index1) {
        this.ranking.forEach((obj, index) => {
          if (index1 == index) {
            this.ranking[index1].flag = false
            this.ranking[index1].backgroundcolor = '#999'
            this.ranking[index1].color = '#fff'
            this.titlelist[index1].on = true
          } else {
            this.ranking[index1].flag = false
            this.titlelist[index1].on = true
          }
        })
      }

    }
  }
</script>

<style scoped="scoped">
  .same-color {
    background-color: #F5F5F5;
  }

  .same-box {
    width: 1200px;
    margin: 0 auto;
    
  }

  .same-box .same {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
  }

  .same-box ul .tongkuan {
    display: inline-block;
    margin-top: 20px;
    background-color: #333;
    color: #f2d291;
    /* width: 120px; */
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    margin-left: 10px;
  }

  .same-box ul li i {
    display: block;
    margin-left: 18px;
    color: #333;
  }

  .same-box .same-img {
    display: block;
    overflow: hidden;
    /* width: 200px;
    height: 200px; */
  }

  .same-box .same-img img {
    transition: transform 1s;
  }

  .same-box .same-img img:hover {
    transform: scale(1.1);
  }

  .same-box .same-ul .same-all {

    width: 388px;
    height: 174px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .same-box .same-ul .same-all a {
    display: block;
  }

  .same-box .same-ul .same-all a img {
    max-width: 100%;
    height: 100%;
  }

  .same-box .same-ul .same-all a img:hover {
    box-shadow: 0px 0px 8px 5px #eee;
  }

  .ranking {
    /* border: 1px solid blue; */
    width: 1200px;
    margin: 0 auto;
  }

  .ranking .h3-ranking {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
  }

  .ranking .ul-ranking {}

  .ranking .ul-ranking li {
    width: 72px;
    height: 28px;
    margin-top: 20px;
    text-align: center;
    background-color: #e6e6e6;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
  }

  .ranking .ul-ranking li a {
    display: block;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color: #666;

  }

  .ranking .ul-ranking li i {
    display: block;
    position: relative;
    top: -6px;

  }

  .ranking .ranking-all {
    font-size: 12px;
    color: #666;
    line-height: 48px;
    height: 48px;
    display: block;
    margin-left: 30px;
    padding-top: 10px;
  }

  .ranking .ranking-all:hover {
    text-decoration: underline;
  }

  .ranking .rangking-a1 {
    display: block;
    overflow: hidden;
  }

  .ranking .rangking-a1 img {
    transition: transform 1s;
  }

  .ranking .rangking-a1 img:hover {
    transform: scale(1.1);
  }

  .ranking .rangking-a2 {
    display: block;
    width: 392px;
    height: 280px;
    /* border: 1px solid blue; */
  }

  .ranking .rangking-a2 .one {
    font-style: normal;
    display: inline-block;
    margin-top: 10px;
    width: 40px;
    height: 23px;
    background-color: #cead7e;
    text-align: center;
    color: #FFFFFF;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    font-size: 12px;
    line-height: 23px;
  }

  .ranking .rangking-a2 .one-img {
    /* border: 1px solid blue; */
    /* width: 200px; */
    height: 200px;
    margin-top: 10px;
    margin-left: 8px;

  }

  .ranking .rangking-a2 .one-img img {
    max-width: 100%;
    height: 100%;
    margin-left: 20px;
  }

  .ranking .rangking-a2 .one-img1 img {
    max-width: 100%;
    height: 100%;
    padding-top: 20px;
  }

  .ranking .rangking-a2 .one-img1 .p1 {
    font-size: 16px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 4px;
    margin-bottom: 8px;
    font-weight: 700;

  }

  .ranking .rangking-a2 .one-img1 .p2 {

    font-size: 12px;
    color: #cc9952;
    ;
    margin-bottom: 10px;
  }

  .ranking .rangking-a2 .one-img1 .p2 em {
    color: #999;
    font-style: normal;
  }

  .ranking .rangking-a2 .one-img1 .a-a {
    width: 89px;
    height: 28px;
    display: block;
    border: 1px solid #cc9952;
    line-height: 28px;
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    border-radius: 18px;
    color: #cc9952;
  }

  .ranking .rangking-a3 li {
    /* border: 1px solid blue; */
    width: 185px;
    /* height: 118px; */
    float: left;
    margin-bottom: 10px;
    background-color: #fff;
    margin-right: 10px;
  }

  .ranking .rangking-a3 li .two {
    font-style: normal;
    display: inline-block;
    margin-top: 10px;
    width: 40px;
    height: 23px;
    background-color: #cead7e;
    text-align: center;
    color: #FFFFFF;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    font-size: 12px;
    line-height: 23px;
  }

  .ranking .rangking-a3 li .two-img {
    width: 118px;
    height: 100px;
    margin: 0 auto;
  }

  .ranking .rangking-a3 li .two-img img {
    max-width: 100%;
    height: 100%;
  }

  .ranking .rangking-a3 li .two-div {
    text-align: center;
    position: absolute;
    bottom: -60px;
  }

  .ranking .rangking-a3 li .two-div .name {
    font-size: 12px;
    color: #666;
  }

  .ranking .rangking-a3 li .two-div .ps1 .sp1 {
    font-size: 12px;
    color: #cc9952;
  }

  .ranking .rangking-a3 li .two-div .ps1 .sp2 {
    font-size: 12px;
    color: #999;
  }
  .ranking .on{
    display: none;
  }
</style>
